<template>
  <div class="admin-view">
      <div class="left">
          <ul class="admin-list">
              <!-- <li v-for="item in admin" :key="item.key">
                  <router-link to="/home/{item}">{{item}}</router-link>
              </li> -->
            <li v-for="(item,index) in routerlist" :key="item.id" 
            @click="routechoose(index)" 
            :class="this.currentIndex == index ? 'urlactive' : ''">
                <router-link :to="item.urladdress">{{item.urlname}}</router-link>
            </li>
          </ul>
      </div>
      <div class="right">
          <router-view></router-view>
      </div>
  </div>
</template>

<script>
export default {
    name: 'adminview',
    data() {
        return {
            currentIndex: 0,
            routerlist: [
                { id: 1,urlname: '首页', urladdress: '/home/admin' },
                { id: 2,urlname: '用户管理', urladdress: '/home/user' },
                { id: 3,urlname: '商品管理', urladdress: '/home/goods' },
                { id: 4,urlname: '订单管理', urladdress: '/home/order' },
                { id: 5,urlname: '权限管理', urladdress: '/home/rights' },
                { id: 6,urlname: '操作日志', urladdress: '/home/setting' },
            ]
        }
    },
    beforeMount() {
        this.currentIndex = Number(localStorage.getItem('currentIndex'))
    },
    methods: {
        routechoose(index) {
            // console.log(index)
            this.currentIndex = index
            localStorage.setItem('currentIndex',this.currentIndex)
        }
    }
}
</script>

<style scoped>
.admin-view {
    height: 100vh;
    
}
.left{
    float: left;
    width: 15%;
    height: 100%;
    /* background-color: #fff; */
    border-right: 3px solid #ccc;
    box-sizing: border-box;
}
.admin-list {
    list-style: none;
}
.admin-list li {
    text-align: center;
    background-color: #fff;
    /* border-bottom: 1px solid #000; */
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    box-shadow: 4px 0px 2px #ccc;
    /* color: #000; */
}
.admin-list .urlactive {
    background-color: #ccc;
    font-weight: bolder;
}
.admin-list li:hover {
    background-color: #ccc;
}
.admin-list li a {
    /* background-color: red; */
    display: inline-block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #000;
}
.right{
    float: right;
    width: 85%;
    height: 100%;
    /* background-color: green; */
}

</style>